<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" style="width:650px;
    margin:20px auto;background-color: white;padding:20px 30px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
    <h2 style="margin-top:0">个人用户注册</h2>
    <h2 class="user-info">用户基本信息</h2>
    <el-form-item label="用户名" prop="account">
      <el-input v-model="ruleForm.account" style="width:280px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="登录密码" prop="password">
      <el-input v-model="ruleForm.password" style="width:280px;display:block" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="passwordConfirm">
      <el-input v-model="ruleForm.passwordConfirm" style="width:280px;display:block" show-password ></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" prop="name">
      <el-input v-model="ruleForm.name" style="width:280px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender" style="text-align:left">
      <el-radio v-model="ruleForm.gender" label="男">男</el-radio>
      <el-radio v-model="ruleForm.gender" label="女">女</el-radio>
    </el-form-item>
    <el-form-item label="身份证号" prop="idCard">
      <el-input v-model="ruleForm.idCard" style="width:280px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="userPhoneNum">
      <el-input v-model="ruleForm.userPhoneNum" style="width:280px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="mail">
      <el-input v-model="ruleForm.mail" style="width:280px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="职务" prop="post">
      <el-input v-model="ruleForm.post" style="width:280px;display:block" placeholder="简单描述"></el-input>
    </el-form-item>

    <el-form-item style="text-align:left">
      <el-button type="primary" @click="post('ruleForm')">立即注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
</el-form>
</template>
<style>
  .user-info{
    color: #00a1ff;
    border-bottom: 1px solid #1e95ce;
    text-align: left;
    font-size: 16px;
    padding: 6px 0px;
  }
</style>
<script>
  export default {
    data() {
      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }   
      return {
        ruleForm: {
          account: '',
          password:'',
          passwordConfirm:'',
          name:'',
          gender:'',
          mail:'',
          post:'',
        },
        rules: {
          account: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 6, max: 20, message: '长度应在6至20个字符之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度应在6至18个字符之间', trigger: 'blur' }
          ],
          passwordConfirm: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { min: 6, max: 18, trigger: 'blur', validator:(rule,value,callback)=>{
              if(value!=this.ruleForm.password)
                callback(new Error('两次输入密码不一致'))
              }
            }
          ],
          name: [
            { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '不应超过10个字', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          idCard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { min: 18, max: 18, message: '身份证有误', trigger: 'blur' }
          ],
          userPhoneNum: [
            { required: true, message: '请输入手机联系电话', trigger: 'blur' },
            { min:11, max: 11, message: '手机联系电话有误', trigger: 'blur' }
          ],
          mail: [
            { required: true, validator:checkEmail, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      post(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        var data={
            account:this.ruleForm.account,
            password:this.ruleForm.password,
            name:this.ruleForm.name,
            gender:this.ruleForm.gender,
            idCard:this.ruleForm.idCard,
            userPhoneNum:this.ruleForm.userPhoneNum,
            mail:this.ruleForm.mail,
            post:this.ruleForm.post
          }
          const that=this;
          //console.log(data);
          this.$axios({
                  url: '/Test/user/register.do',
                  method:'post',
                  data:JSON.stringify(data),
                  headers:{'Content-Type': 'application/json'}
               }).then(function(return_data)
              {
                if(return_data.data.code==-1) {
                  this.$refs[formName].resetFields();
                  alert('注册失败');
                }
                else{
                  that.$router.push({path:'/registerEnterprise'});
                }
              },function(return_data)
              {
                alert(return_data)
              });
      }
    }
  }
</script>